import React, {Component} from 'react'
import { Menu, Dropdown, Icon } from 'antd';
import './customerApi'
import {updateAgentState,importIsAgaintFun} from './customerApi'
import './index.scss'
import online from './images/zaixian.png'
import busy from './images/manglu.png'
import offline from './images/lixian.png'
import api from '../../../api/api';
// import store from 'store';
class Customer extends Component {
    state = {
        callTypeNav:1,
        navBoxShow:false,
    }
    constructor(props){
        super(props)
    }
    async componentDidMount() {
        const self = this
        const userInfoNav = await api.getUserInfo()
        const getAgentIdNumNav = await api.getAgentId(userInfoNav.user)
        if(getAgentIdNumNav){
            this.setState({
                navBoxShow:true
            })
        }else{
            this.setState({
                navBoxShow:false
            })
        }
        let getcallInfos = localStorage.getItem("callInfo")
        if(getcallInfos && getcallInfos.indexOf("callInfos") != -1 && getcallInfos.indexOf("callType") != -1){
            this.setState({
                callTypeNav:0
            })
        }
        window.addEventListener("setItemEvent", function (e) {
            const _self = this
            let getcallInfo = localStorage.getItem("callInfo")
            if(getcallInfo && (e.newValue.indexOf("callInfos") != -1) && (getcallInfo.indexOf("{") != -1)){
                // debugger
                let getCallInfo = JSON.parse(e.newValue);
                if(getCallInfo && (typeof getCallInfo=='object') && getCallInfo.callInfos){
                    // updateAgentState(0)
                    this.setState({
                        callTypeNav:0
                    })
                }else{
                    // updateAgentState(1)
                    this.setState({
                        callTypeNav:1
                    })
                }
                return
            }
            // 兼容没有localstorage场景
            if((e.newValue.indexOf("callInfos") != -1) && (e.newValue.indexOf("callType") != -1)){
                let getCallInfo = JSON.parse(e.newValue);
                if(getCallInfo && (typeof getCallInfo=='object') && getCallInfo.callInfos){
                    this.setState({
                        callTypeNav:0
                    })
                }else{
                    this.setState({
                        callTypeNav:1
                    })
                }
            }
            // 判断是否离线（比如被别人顶替掉等）
            if(e.newValue && e.newValue.indexOf("callRepeat") != -1){
                this.setState({
                    callTypeNav:-1
                })
            }
        }.bind(this));
    }
    async choseCallType(res){
        updateAgentState(res)
        importIsAgaintFun()

        this.setState({
            callTypeNav:res
        })

    }
    callChoseDom(){
        if(this.state.callTypeNav === 0){
            localStorage.setItem("callOnOff","off");
            return (
                <div className="ant-dropdown-link iconSizePos"><img className="iconSize" src={busy} /> 忙碌<Icon type="down" /></div>
            )
        }
        if(this.state.callTypeNav === -1){
            localStorage.setItem("callOnOff","off");
            return (
                <div className="ant-dropdown-link iconSizePos"><img className="iconSize" src={offline} /> 离线<Icon type="down" /></div>
            )
        }
        localStorage.setItem("callOnOff","on");
        return (
            <div className="ant-dropdown-link iconSizePos"><img className="iconSize" src={online} /> 空闲<Icon type="down" /></div>
        )
    }

    render() {
        let menu = ""
        if(this.state.callTypeNav !== 0){
            menu = (
                <Menu>
                    <Menu.Item>
                        <div className="iconSizePos iconSizePosPos" onClick={()=>this.choseCallType(1)} >
                            <img className="iconSize" src={online} /> 空闲
                        </div>
                    </Menu.Item>
                    <Menu.Item disabled>
                        <div className="iconSizePos iconSizePosPos" >
                            <img className="iconSize" src={busy} /> 忙碌
                        </div>
                    </Menu.Item>
                    <Menu.Item>
                        <div className="iconSizePos iconSizePosPos" onClick={()=>this.choseCallType(-1)} >
                            <img className="iconSize" src={offline} /> 离线
                        </div>
                    </Menu.Item>
                </Menu>
            );
        }else{
            menu = (
                <Menu>
                    <Menu.Item disabled>
                        <div className="iconSizePos iconSizePosPos" onClick={()=>this.choseCallType(1)} >
                            <img className="iconSize" src={online} /> 空闲
                        </div>
                    </Menu.Item>
                    <Menu.Item disabled>
                        <div className="iconSizePos iconSizePosPos" >
                            <img className="iconSize" src={busy} /> 忙碌
                        </div>
                    </Menu.Item>
                    <Menu.Item disabled>
                        <div className="iconSizePos iconSizePosPos" onClick={()=>this.choseCallType(-1)} >
                            <img className="iconSize" src={offline} /> 离线
                        </div>
                    </Menu.Item>
                </Menu>
            );
        }
        return (
            <div>
                {this.state.navBoxShow?<div>
                    <Dropdown overlay={menu}>
                        <div className="selectCallType">
                            {this.callChoseDom()}
                        </div>
                    </Dropdown>
                </div>:null}
            </div>
        )
    }
}

export default Customer;
